<template>
	<el-card :style="cardStyle ? cardStyle : { margin: '3px' }" class="c-card">
		<template #header v-show="title">
			<span class="titleP">{{ title }}</span>
			<slot name="infoBox" />
			<div class="editBox" v-if="editOrSave == 'edit'"><el-button size="small"
					@click="emits('edit')">修改</el-button></div>
			<div class="editBox" v-if="editOrSave == 'save'"><el-button size="small"
					@click="emits('save')">保存</el-button></div>
		</template>
		<slot />
	</el-card>
</template>

<script lang='ts' setup>
defineOptions({
	name: 'MkCard'
})
const props = defineProps({
	title: { type: String, default: undefined },
	editable: { type: Boolean, default: false },
	editOrSave: { type: String, default: undefined },
	cardStyle: { type: Object, default: () => { } }
})
const emits = defineEmits(['edit', 'save'])
</script>

<style lang='scss' scoped>
.c-card {
	margin: 3px 5px;
	position: relative;

	:deep(.el-card__body) {
		padding: 10px 15px;
	}

	:deep(.el-card__header) {
		padding: 0 5px;
	}

	.titleP {
		font-size: 1.3em;
		font-weight: 800;
		margin: 0;
	}

	.editBox {
		position: absolute;
		top: 0;
		right: 0;
	}
}
</style>